<template>
	<view class="w-toast" :style="[toastZindexComputed]" :class="[isShow ? 'toast-show' : 'toast-hidd']">
		<view class="wui-mask" :class="[mask ? 'show-mask' : 'hidd-mask']" @touchmove.stop.prevent></view>
		<view class="toast-content" :class="[directionClass(direction)]">
			<view class="toast-text" v-if="!icon">{{ title }}</view>
			<view class="toast-icon-text" v-if="icon">
				<view class="iconfont" :class="[icon]"></view>
				<view>{{ title }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'w-toast',
	watch: {
		type: {
			handler(val) {
				switch (val) {
					case 'success':
						this.icon = 'icon-wui-success';
						break;
					case 'warning':
						this.icon = 'icon-wui-warning';
						break;
					case 'error':
						this.icon = 'icon-wui-close';
						break;
				}
			}
		}
	},
	data() {
		return {
			icon: '',
			type: '',
			title: '',
			mask: false,
			timer: null,
			isShow: false,
			duration: 3000,
			direction: 'center'
		};
	},
	computed: {
		toastZindexComputed() {
			return {
				'--toast-zindex': this.uniWuiConfig.zIndex.toast
			};
		}
	},
	methods: {
		show(options) {
			let { type, duration, title, mask, icon, direction } = options;
			if (this.timer) return false;
			this.direction = direction || 'center';
			this.type = type || '';
			this.icon = icon || '';
			this.title = title || '';
			this.mask = mask || false;
			this.isShow = true;
			this.timer = setTimeout(this.reset, duration || this.duration || 3000);
		},
		reset() {
			this.type = '';
			clearTimeout(this.timer);
			this.timer = null;
			this.isShow = false;
		},
		directionClass(direction) {
			let className = '';
			switch (direction) {
				case 'center':
					className = 'toast-center';
					break;
				case 'top':
					className = 'toast-top';
					break;
				case 'bottom':
					className = 'toast-bottom';
					break;
			}
			return className;
		}
	}
};
</script>

<style lang="scss" scoped>
.w-toast {
	position: fixed;
	transition: all 0.4s;
	.wui-mask {
		position: fixed;
		background-color: #000;
		transition: opacity 0.4s;
	}
	.show-mask {
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.hidd-mask {
		z-index: -1;
	}

	.toast-content {
		position: fixed;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(0, 0, 0, 0.62);
		border-radius: 10rpx;
		transition: opacity 0.4s;
		z-index: 2;
		.toast-text {
			color: #fff;
			padding: 18rpx 30rpx;
			word-wrap: break-word;
		}

		.toast-icon-text {
			width: 240rpx;
			height: 240rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			word-wrap: break-word;

			.iconfont {
				color: #fff;
				font-size: 90rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.toast-center {
		top: 50%;
	}
	.toast-top {
		top: 20%;
	}
	.toast-bottom {
		bottom: 10%;
	}
}

.w-toast.toast-show {
	z-index: var(--toast-zindex);

	.wui-mask {
		opacity: 0.4;
	}

	.toast-content {
		opacity: 1;
	}
}

.w-toast.toast-hidd {
	z-index: -1;

	.wui-mask {
		opacity: 0;
	}

	.toast-content {
		opacity: 0;
	}
}
</style>
